<template>
  <el-card>
    <div>
      <div v-for="item in state" :key="item.id">
        <div class="all">
          <el-checkbox
            v-model="item.isCheckAll"
            :isdeterminate="item.isIndeterminate"
            @change="checkAllChange(item)"
            >{{ item.name }}</el-checkbox
          >
        </div>
        <el-checkbox-group v-model="item.checkeds" @change="gourpChange(item)">
          <el-checkbox
            v-for="sub in item.children"
            ::key="sub.id"
            :label="sub.id"
          >
            {{ sub.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="flex">
        <el-button>清空</el-button>
        <el-button type="primary" @click="clickHandle">确定</el-button>
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import {
  getRourceListByRoleIdApi,
  resourceListAllApi,
  resourceCategoryAllApi,
  allocResourceApi,
} from "./api/index";
import { useRoute } from "vue-router";
import { ref } from "vue";
const route = useRoute();
type IState = IResourceCategoryModel & {
  children: IResourceModel[];
  checkeds: number[];
  isCheckAll: boolean;
  isIndeterminate: boolean;
};
let state = ref<IState[]>([]);
if (route.query.id) {
  Promise.all([
    resourceCategoryAllApi(),
    resourceListAllApi(),
    getRourceListByRoleIdApi(parseInt(route.query.id as string)),
  ])
    .then((res) => {
      state.value = res[0].data.map((item) => ({
        ...item,
        children: [],
        checkeds: [],
        isCheckAll: false,
        isIndeterminate: false,
      }));
      res[1].data.forEach((resource) => {
        const cate = state.value.find(
          (cate) => cate.id === resource.categoryId
        );
        cate && cate.children.push(resource);
      });
      res[2].data.forEach((item) => {
        const pp = state.value.find((sub) => sub.id === item.categoryId);
        pp && pp.checkeds.push(item.id);
      });
      state.value.forEach((pp) => {
        // 处理全选
        pp.isCheckAll = pp.checkeds.length === pp.children.length;
        // 处理半选
        pp.isIndeterminate = pp.checkeds.length !== pp.children.length;
      });
    })
    .catch(() => {});
}
const checkAllChange = (data: IState) => {
  if (!data.isCheckAll) {
    data.checkeds = [];
  } else {
    data.checkeds = data.children.map((item) => item.id);
  }
};
const gourpChange = (data: IState) => {
  console.log(data.checkeds.length);

  // 处理全选
  data.isCheckAll = data.checkeds.length === data.children.length;
  // 处理半选
  data.isIndeterminate =
    data.checkeds.length > 0 && data.checkeds.length < data.children.length;
};
const clickHandle = () => {
  console.log(1);

  allocResourceApi({
    roleId: parseInt(route.query.id as string),
    resourceIds: state.value.reduce<number[]>((prev, next) => {
      return prev.concat(next.checkeds);
    }, []),
  });
};
</script>
<style lang="less" scoped>
.all {
  padding: 20px;
  background-color: #f2f6fc;
}
:deep(.el-checkbox-group) {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  padding: 20px;
}
</style>
